<template>
  <div id="study" class="container">
    <table-filter>
      <el-input
          v-model="apiSetting.data.username"
          placeholder="请输入学生姓名"
          clearable
      />
      <school-dept-class-selection
          show-school
          show-dept
          show-class
          :school-code.sync="apiSetting.data.schoolCode"
          :dept-code.sync="apiSetting.data.deptCode"
          :class-code.sync="apiSetting.data.classCode">
      </school-dept-class-selection>
      <el-button plain type="warning" @click="search">查询</el-button>
    </table-filter>
    <data-table
        ref="dtb"
        :api-setting="apiSetting"
        pagination
        :sort-column="sortColumn"
    >
      <!--<el-table-column fixed label="ID" prop="userid" sortable />-->
      <el-table-column label="帐号" prop="usercode"/>
      <el-table-column
          label="姓名"
          prop="username"
          show-overflow-tooltip
      />
      <el-table-column label="班级" prop="organizename" sortable/>
      <el-table-column label="学习时长" prop="duration" sortable/>
      <el-table-column label="学习次数" prop="studytime" sortable/>
      <el-table-column
          label="最后一次观看时间"
          prop="lasttime"
          sortable
      >
        <template slot-scope="{ row }">
          {{ row.lasttime | formatterDate }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="60">
        <template slot-scope="{ row }">
          <el-button class="danger" @click="view(row)" type="text" size="small"
          >查看
          </el-button>
        </template>
      </el-table-column>
    </data-table>
    <el-dialog
        destroy-on-close
        title="科目学习时间分析"
        center
        :visible.sync="showChart"
        @close="chartOption = {}"
    >
      <chart height="400px" :option="chartOption"></chart>
    </el-dialog>
  </div>
</template>

<script>
import dtb from "@/mixins/refs/dtb";
import dialog from "@/mixins/component/dialog";
import tbSearch from "@/mixins/dataTable/tbSearch";
import TableFilter from "@/components/TableFilter";
import SchoolDeptClassSelection from "@/views/component/SchoolDeptClassSelection"

export default {
  name: "index",
  components: {SchoolDeptClassSelection, TableFilter},
  mixins: [tbSearch, dtb, dialog],
  data() {
    return {
      apiSetting: {
        method: "post",
        url: "/sys/studySchedule/getStudySchedule",
        data: {
          username: "",
          classCode: "",
          deptCode: "",
          schoolCode: ""
        }
      },
      showChart: false,
      chartOption: {},
      sortColumn: ["userid", "organizename", "duration", "counts", "lasttime"]
    };
  },
  methods: {
    view(row) {
      if (!row.studytime) {
        this.$notify.warning("该学生没有学习记录！");
        return;
      }
      this.showChart = true;
      this.axios
          .get(`/sys/studySchedule/getScaleIcon/${row.userid}`)
          .then(this.renderChart);
    },
    renderChart(data) {
      const total = data.reduce((total, cur) => {
        total += cur.value;
        return total;
      }, 0);
      const title = this.formatterTime(total);
      this.$nextTick(() => {
        this.chartOption = {
          title: {
            text: title,
            x: "center",
            y: "center",
            textStyle: {
              color: "#76DEDD",
              fontSize: 16
            }
          },
          tooltip: {
            trigger: "item",
            formatter: function (params) {
              return `${params.name}<br>${this.formatterTime(params.value)} ( ${
                  params.percent
              } % )`;
            }.bind(this)
          },
          series: [
            {
              name: "时长分析",
              selectedOffset: 10,
              clockwise: true,
              selectedMode: "single",
              type: "pie",
              radius: ["50%", "70%"],
              data: data
            }
          ]
        };
      });
    },
    formatterTime(min) {
      if (min < 60) return `${min} min`;
      return `${(min / 60).toFixed(0)} h ${min % 60} min`;
    }
  }
};
</script>

<style scoped></style>
